<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <div id="app">
        <!--key指的是css的属性   value是data中的属性设置-->
       <div v-bind:style="{color:fontColor,fontSize:zitidaxiao+'px'}">{{msg}}</div>
      <!--styleObj这是对象的方式-->
      对象的方式：<div v-bind:style="styleObj">{{msg}}</div>
      <!--数组的方式-->
      数组的方式：<div v-bind:style="[styleObj,styleObj2]">{{msg}}</div>
  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
             msg:'hello world',
             fontColor:'red',
             zitidaxiao:30,
            styleObj:{
                 color:'red',
                fontSize:'30px',
            },
            styleObj2:{
                border:'1px solid #dedede'
            }
        },

    });

</script>
  <style>
      .mydiv2{
          border:1px solid #dedede;
      }
      .mydiv1{
          font-size: 30px;
      }
      .mydiv {
          font-weight: bold;
          color: #ff0000;
      }
  </style>
</body>
</html>